<template>
  <el-form :model="form" :rules="rules" ref="deptForm" label-width="120px">
    <el-form-item label="部门名称" prop="name">
      <el-input
        v-model="form.name"
        style="width: 80%"
        placeholder="1-50个字符"
      />
    </el-form-item>
    <el-form-item label="部门编码" prop="code">
      <el-input
        v-model="form.code"
        style="width: 80%"
        placeholder="1-50个字符"
      />
    </el-form-item>
    <el-form-item label="部门负责人" prop="manager">
      <el-select v-model="form.manager" style="width: 80%" placeholder="请选择">
        <el-option
          v-for="item in list"
          :key="item.id"
          :value="item.username"
          :label="item.username"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="部门介绍" prop="introduce">
      <el-input
        v-model="form.introduce"
        style="width: 80%"
        placeholder="1-300个字符"
        type="textarea"
        :rows="3"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" size="small" @click="hSubmit">确定</el-button>
      <el-button size="small" @click="hCancel">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { getEmployeeSimple } from "@/api/employees";
import {
  addDepartments,
  getDepartmentDetail,
  updataDepartments,
} from "@/api/departments";
export default {
  props: {
    id: {
      type: String,
      require: true,
    },
    isEdit: {
      type: Boolean,
      require: true,
    },
    originList:{
      type: Array,
      require: true,
    }
  },
  data() {
    // 校验编码在项目中是否存在
    const validCode=(rule,value,callback)=>{
      // 如果当输入的数据在项目中的数据中(this.originList)存在,提示用户输入错误
      let exsitCodeList=this.originList.map(item=>item.code)
      console.log('exsitCodeList',exsitCodeList);  ///exsitCodeList是项目中存在的code

      // 如果是编辑状态,需要吧当前的部门的编码从已经存 在的数组中移除  说白了 当前输入的id不能和数组中的id相等 就可以了
      if(this.isEdit){
      const  ddf=this.originList.filter(item=>item.id!==this.id)
      console.log("ddf",ddf);//
      exsitCodeList=   ddf.map(item=>item.code)
        // exsitCodeList=this.originList.filter(item=>item.id=this.id).map(item=>item.code)   简写
      }

      if(exsitCodeList.includes(value)){
        //表示已经存在
        callback(new Error(`该编码:${value}已经存在了,请重新输入`))
      }else{
        // 不存在,不提示 直接放行
        callback()
      }
    }


        // 校验部门名称在同级部门是否存在
    const validName=(rule,value,callback)=>{
      // 找到当前点击部门的子部门
    let exsitCodeName=  this.originList.filter(item=>item.pid===this.id).map(item=>item.name)

   if (this.isEdit) {
    // 获取当前点击的部门的pid
   const pid= this.originList.find(item=>item.id===this.id)
    // 获取被占用的名称列表
    this.originList.filter(item=>item.pid===pid&&item.id!==this.id).map(item=>item.name)
    //  const curDepartment= this.originList.find(item=>item.id===this.id)  //找到当前点击的部门对象
    // const pid= curDepartment.pid
    // const brother= this.originList.filter(item=>item.pid===pid)  //得到[财务部,税务部,薪资核算部]
    //  exsitCodeName= brother.filter(item=>item.id!==this.id).map(item=>item.name)
    
   }
    //  判断当前用户输入的名称(value )是否存在数组中(exsitCodeName)
       console.log('exsitCodeName',exsitCodeName);
      if(exsitCodeName.includes(value)){
        //表示已经存在
        callback(new Error(`该部门名称:${value}已经存在了,请重新输入`))
      }else{
        // 不存在,不提示 直接放行
        callback()
      }
    }

    return {
      form: {
        name: "",
        code: "",
        manager: "",
        introduce: "",
        },
      rules: {
        name: [
           {required: true,  message: "请输入部门的名称",  trigger: "blur", },
           { min: 1, max: 15, message: "请输入长度1~15的部门名称",  trigger: "blur", },
           {validator:validName,  trigger: "blur"}],
        code: [
          { required: true, message: "请输入部门的编码", trigger: "blur",},
            {  min: 1,
            max: 15,
            message: "请输入长度1~15的部门编码称",
            trigger: "blur"},
          {validator:validCode,  trigger: "blur"}  ],    
      
              
      
                
        manager: [
          {
            required: true,
            message: "请输入部门的负责人",
            trigger: "blur",
          },
        ],
        introduce: [
          {
            required: true,
            message: "请输入部门的介绍",
            trigger: "blur",
          },
          {
            min: 1,
            max: 300,
            message: "请输入长度1~300的部门介绍",
            trigger: "blur",
          },
        ],
      },
      list: [], //保存负责人信息
    };
  },
  // 第3种方法用watch  有2中  解决异步数据不更新

  // 3.1
  watch: {  //这里暂时不用  因为有bug
    // 可以监听  props中的属性或者data中属性
    // id: function(new_value,old_value){
    //   console.log(new_value);
    //   console.log(old_value);
    //   this.loadDepartmentDetail
    // }

    // 3.2
    // id: {
    //   // 这里不要写箭头函数  因为这里用了this  指向vue实例   箭头函数没有this指向
    //   handler: function (new_value, old_value) {
    //     console.log("new_value", new_value);
    //     console.log("old_value", old_value);
    //     this.loadDepartmentDetail();
    //   },
    // },
  },
  created() {
    this.loadEmployeeSimple();
    // 如果是编辑状态  触发这个函数  实现编辑
    if (this.isEdit) {
      this.loadDepartmentDetail();
    }
  },

  methods: {
    // 获取部门详情
    async loadDepartmentDetail() {
      try {
        const res = await getDepartmentDetail(this.id);
        console.log("res-loadDepartmentDetail", res); //res.code  res.data
        if (res.code === 10000) {
          // 将获取到的部门详情填充到表单
          this.form = res.data;
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 加载部门负责人信息  自定义函数 loadEmployeeSimple(){}
    async loadEmployeeSimple() {
      try {
        // 发送请求 获取简单员工信息
        const res = await getEmployeeSimple();
        console.log("res111", res); //res.data   员工数据列表   res.data( id / username)
        this.list = res.data;
      } catch (error) {
        console.log(error);
      }
    },
    // 新增子部门
    async doAdd() {
      try {
        // 缺少pid  父组件的id  (父传子方法获取  props)
        const res = await addDepartments({ pid: this.id, ...this.form }); //这里的id是props里面的
        console.log("res的添加", res);
        if (res.code !== 10000) return this.$message.error(res.message);
        this.$message.success(res.message);
        //  重新渲染页面
        // 关闭弹窗    因为这里是子组件 不能直接操作  需要子传父 让父组件操作
        this.$emit("success");
      } catch (error) {
        console.log(error);
      }
    },
    async doEdit() {
      const res = await updataDepartments(this.form);
      console.log("updataDepartments-res", res);
      if (res.code !== 10000) return this.$message.error(res.message);
      this.$message.success(res.message);
      // 重新渲染  关闭弹窗
      this.$emit("success");
    },
    // 确定提交
    hSubmit() {
      // 兜底校验
      this.$refs.deptForm.validate((valid)=>{
       if(!valid) return //校验失败
      //  校验成功

      //  this.doAdd()  //添加
      this.isEdit ? this.doEdit() : this.doAdd(); //利用3元   如果isEdit是true就是修改模式,如果isEdit是false是添加模式
      })
    },
    // 取消提交
    hCancel() {
      this.$emit("close");
    },
  },
};
</script>

<style>
</style>